<template>
  <div class="searchpage">
    <div class="searchHead">
      <span class="iconfont iconjiantou2" @click="back"></span>
      <div class="inputbox">
        <span class="iconfont iconsearch"></span>
        <input type="text" placeholder="有内鬼,停止交易" v-model="keyword" />
      </div>
      <div class="search" @click="search">搜索</div>
    </div>
    <div class="suggestions" v-if="searchlist.length==0">
      <div class="history same">
        <h2>历史记录</h2>
        <div class="words" v-if="historylist.length!=0">
          <div
            class="word"
            v-for="(item,index) in historylist"
            :key="index"
            @click="sendSuggestion(item)"
          >{{item}}</div>
        </div>

        <div v-else class="noword">本周内无历史记录</div>
      </div>
      <div class="hot same">
        <h2>热门搜索</h2>
        <div class="words">
          <div
            class="word"
            v-for="(item,index) in hot"
            :key="index"
            @click="sendSuggestion(item)"
          >{{item}}</div>
        </div>
      </div>
    </div>
    <div class="searchdata">
      <Homebody
        v-for="item in searchlist"
        :key="item.id"
        :spread="item"
        @gopage="$router.push('/newsdetails/'+item.id)"
      />
    </div>
  </div>
</template>

<script>
import Homebody from "../components/Homebody";
export default {
  components: {
    Homebody
  },
  data() {
    return {
      keyword: "",
      searchlist: [],
      historylist: [],
      hot: ["美女", "关晓彤", "阿信"]
    };
  },
  watch: {
    keyword(newval) {
      if (newval == "") {
        this.searchlist = [];
      }
    }
  },
  methods: {
    back() {
      if (this.searchlist.length != 0) {
        this.searchlist = [];
      } else {
        this.$router.back();
      }
    },
    search() {
      this.$axios({
        url: "/post_search",
        params: {
          keyword: this.keyword
        }
      }).then(res => {
        console.log(res);
        this.searchlist = res.data.data;
        // 记录功能
        // 1.将keyword加进this.historylist,过程判断是否已有,没有再加
        if (this.historylist.indexOf(this.keyword) == -1) {
          this.historylist.push(this.keyword);
        }
        // console.log(historylist);
        //2.将历史记录this.historylist存于本地储存,其他方式可能刷新页面this.historylist数组就空了
        const list = JSON.stringify(this.historylist);
        //3.要转本地储存记得转换为字符串
        localStorage.setItem("history", list);
      });
    },
    //建议搜索按钮点击事件
    sendSuggestion(item) {
      this.keyword = item;
      this.search();
    }
  },
  mounted() {
    //4.加载时将本地储存的数据渲染在历史记录上
    const historylist = localStorage.getItem("history");
    // 5. 转出本地储存记得转换为数组
    this.historylist = JSON.parse(historylist);
  }
};
</script>

<style lang="less" scoped>
.searchpage {
  .searchHead {
    padding: 3.222vw 4.444vw 7.222vw 5.556vw;
    display: flex;
    align-items: center;
    // padding: 0 0 20px;
    .iconfont {
      font-size: 15px;
      margin-right: 10px;
    }
    .inputbox {
      display: flex;
      margin-right: 20px;
      width: 200px;
      align-items: center;
      border: 1px solid #ccc;
      height: 38px;
      padding: 0 20px;
      border-radius: 28px;

      input {
        border: none;
        color: #333;
      }
    }
    .search {
      font-size: 14px;
      color: #333;
    }
  }
  .suggestions {
    padding: 3.222vw 4.444vw 7.222vw 5.556vw;
  }
  h2 {
    font-size: 14px;
  }

  .noword {
    margin: 10px 0;
    font-size: 13px;
  }
  .same {
    padding: 20px 0 10px;
    border-bottom: 1px solid #e4e4e4;
  }
  .words {
    display: flex;
    flex-wrap: wrap;

    .word {
      //   border: 1px solid #333;
      font-size: 13px;
      // padding: 0px 10px;
      margin: 10px 10px 0 0;
    }
  }
}
</style>